<template>
  <el-dialog
      v-model="dialogVisible"
      title="新增"
      width="450"
      :close-on-click-modal="false"
  >
    <el-form ref="deptFormRef"  :model="dataForm" :rules="rules" label-width="80px">
      <el-form-item label="科室名称" prop="name">
        <el-input style="width: 100%" v-model="dataForm.name"  placeholder="科室名称" clearable></el-input>
      </el-form-item>

      <el-form-item label="科室类型" prop="outpatient">
        <el-select v-model="dataForm.outpatient" class="input" placeholder="科室类型" clearable>
          <el-option label="门诊" :value="true"></el-option>
          <el-option label="非门诊" :value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item  label="科室级别" prop="recommended">
        <el-select v-model="dataForm.recommended" class="input" placeholder="推荐级别" clearable>
          <el-option label="优先" :value="true"></el-option>
          <el-option label="非优先" :value="false"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="科室介绍" prop="description">
        <el-input
            style="width: 100%"
            v-model="dataForm.description"
            placeholder="科室介绍"
            clearable
            type="textarea"
            :rows="8"
            maxlength="500"
            show-word-limit
        ></el-input>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit" >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>

import {ref} from "vue";

let dialogVisible = ref(false);

// 父组件点击 新增 调用函数打开 dialog
const init = () => {
  dialogVisible.value = true;
};

let dataForm=ref({
  "name": '',
  "outpatient": '',
  "recommended": '',
  "description": ''
})

// 表单校验
const rules = ref({
  name: [
    {required: true, pattern: '^[a-zA-Z0-9\u4e00-\u9fa5]{1,10}$', message: '部门名称格式错误'}
  ],
  outpatient: [{required: true, message: '选择科室类型'}],
  recommended: [{required: true, message: '选择推荐级别'}],
  description: [{required: true, message: '填写科室介绍'}],


})

// 表单实例化对象
let deptFormRef=ref()

// 将方法暴露给父组件
defineExpose({init})

const submit = async () => {
  resetForm()
  if (!deptFormRef.value) return
  await deptFormRef.value.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
};


const resetForm = () => {
  deptFormRef.value.resetFields()
  // dataForm.value.name = '';
  // dataForm.value.outpatient=''
};

</script>

<style lang="scss" scoped>

</style>